<template>
  <div class="tag">
    <el-card class="box-card">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../assets/images/biaoqian.png" />
        <span>{{ $t("tag.tag") }}</span>
      </div>
      <div class="text item">
        <el-tag
          size="mini"
          class="tag-item"
          :style="randomClass()"
          v-for="taginfo in tagList"
          @click="tag(taginfo.name)"
          >{{ taginfo.name }}</el-tag
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import tags from "../api/tags";

export default {
  name: "tag",
  data() {
    return {
      tagList: [],
      tagStyle: [
		  {
			  background: "#409eff",
			  color: "#FFF"
		  },
		  {
			  background: "#67c23a",
			  color: "#FFF"
		  },
		  {
			  background: "#909399",
			  color: "#FFF"
		  },
		  {
			  background: "#f56c6c",
			  color: "#FFF"
		  },
		  {
			  background: "#e6a23c",
			  color: "#FFF"
		  },
		  {
			  background: "red",
			  color: "#FFF"
		  },
		  {
			  background: "#7FFFD4",
			  color: "#FFF"
		  },
		  {
			  background: "#DEB887",
			  color: "#FFF"
		  },
		  {
			  background: "#6495ED",
			  color: "#FFF"
		  }
	  ],
    };
  },
  methods: {
    tag(name) {
      this.$router.push({
        name: "tag",
        params: {
          name: name
        },
        query: {
          type: 'tag'
        }
      });
    },
    randomClass: function () {
      let random = this.tagStyle[Math.floor(Math.random()*this.tagStyle.length)]
      return {
        color: random.color,
        background: random.background,
		"border-color": random.background
      };
    },
  },

  created() {
    tags.getTagList().then((res) => {
      if (res.data.code != "200") {
        this.$message({
          message: "加载标签页数据失败",
          type: "warning",
        });
        return false;
      }
      this.tagList = res.data.data;
    });
  },
};
</script>

<style scoped>
.box-card .item:hover {
  color: #409eff;
  cursor: pointer;
}

.box-card span {
  font-weight: bold;
}

.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.tag-item {
  margin-right: 10px;
}
</style>